<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>浏览历史记录</title>
    <script>
        // 页面加载完成后执行的函数
        window.onload = function() {
            // 更新浏览历史
            updateHistory(window.location.href);

            // 显示浏览历史
            displayHistory();
        };

        /**
         * 更新浏览历史的函数
         * @param {string} url 当前页面的URL
         */
        function updateHistory(url) {
            // 从sessionStorage获取历史记录，如果不存在则初始化为数组
            let history = JSON.parse(sessionStorage.getItem('history')) || [];
            // 如果历史记录中不包含当前URL，则添加到历史记录中
            if (!history.includes(url)) {
                history.push(url);
                // 将更新后的历史记录保存到sessionStorage
                sessionStorage.setItem('history', JSON.stringify(history));
            }
        }

        /**
         * 显示浏览历史的函数
         */
        function displayHistory() {
            // 从sessionStorage获取历史记录，如果不存在则初始化为数组
            let history = JSON.parse(sessionStorage.getItem('history')) || [];
            // 获取页面上的历史记录列表元素
            const historyList = document.getElementById('historyList');
            // 清空现有列表
            historyList.innerHTML = '';

            // 遍历历史记录，创建并添加到列表中
            history.forEach(function(url, index) {
                const li = document.createElement('li');
                li.textContent = `第 ${index + 1} 次访问: ${url}`;
                historyList.appendChild(li);
            });
        }
    </script>
</head>
<body>
    <h2>浏览历史记录</h2>
    <ul id="historyList"></ul>
</body>
</html>